<template>
    <div class="product-product">
        <div class="assist-side" style="display: none;">
            <a class="btn-meiqia"><i class="iconfont"></i></a>
            <a href="#"><i class="iconfont"></i></a>
            <a href="#page-top" class="go-top"><i class="iconfont"></i></a>
        </div>
        <div class="container">
            <div class="notice"></div>
            <div class="row">
                <div id="content" class="col-sm-12 product-details-page">
                    <!--Slide start-->
                    <div class="row">
                        <div class="product-iamge">
                            <div class="page-back">
                                <a href="javascript:window.history.back(-1);">
                                    <i class="iconfont"></i>
                                </a>
                            </div>
                            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li v-for="item,index in goods_info.image_list"
                                        v-bind:class="index==0 ? 'active' : ''"
                                        data-target="#carousel-example-generic"
                                        v-bind:data-slide-to="index" >

                                    </li>
                                    <!--<li data-target="#carousel-example-generic" data-slide-to="1"></li>-->
                                    <!--<li data-target="#carousel-example-generic" data-slide-to="2"></li>-->
                                </ol>

                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div v-for="item,index in goods_info.image_list"
                                         v-bind:class="index==0?'active':''"
                                         class="item " >
                                        <img v-bind:src="item.url" >
                                    </div>

                                </div>

                                <!-- Controls -->
                                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                            <!--
                            <div id="product-slides" class="swiper-container swiper-container-horizontal swiper-container-ios">
                                <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1500px, 0px, 0px);">
                                    <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="4" style="width: 375px;">
                                        <img src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-12-500x500.png" alt="" class="img-responsive">
                                    </div>
                                    <div class="swiper-slide" data-swiper-slide-index="0" style="width: 375px;">
                                        <img src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-16-500x500.png" alt="" class="img-responsive">
                                    </div>
                                    <div class="swiper-slide" data-swiper-slide-index="1" style="width: 375px;">
                                        <img src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-16-500x500.png" alt="" class="img-responsive">
                                    </div>
                                    <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="2" style="width: 375px;">
                                        <img src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-12-500x500.png" alt="" class="img-responsive">
                                    </div>
                                    <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="3" style="width: 375px;">
                                        <img src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-9-500x500.png" alt="" class="img-responsive">
                                    </div>
                                    <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="4" style="width: 375px;">
                                        <img src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-12-500x500.png" alt="" class="img-responsive">
                                    </div>
                                    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0" style="width: 375px;">
                                        <img src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-16-500x500.png" alt="" class="img-responsive">
                                    </div>
                                </div>
                                <div class="swiper-pagination swiper-pagination-bullets">
                                    <span class="swiper-pagination-bullet"></span>
                                    <span class="swiper-pagination-bullet"></span>
                                    <span class="swiper-pagination-bullet"></span>
                                    <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                                    <span class="swiper-pagination-bullet"></span></div>
                                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
                            </div>
                            -->

                        </div>
                    </div>
                    <div class="flash-price-wrap">
                        <div class="product-price-wrapper">
                            <span class="price-new">￥{{goods_info.price}}</span>
                            <!--
                            <div class="special-points">
                                <div class="table-cell">
                                    <span class="price-old">￥999.00</span>
                                </div>
                            </div>
                            -->
                        </div>
                        <!--
                        <div class="product-countdown">
                            <span class="text">距结束剩余:</span>
                            <ul class="countdown" data-countdown="5757386"><li><span>66</span></li> <li><span>15</span></li> <li><span>16</span></li> <li><span>09</span></li></ul>
                        </div>
                        -->
                    </div>

                    <!--Slide end-->
                    <!--Price start-->
                    <div class="row widget">
                        <div class="col-xs-12">
                            <span class="product-name">{{goods_info.name}}</span>
                            <!--
                            <ul class="list-unstyled product-attribute mb-0">
                                <li class="product-info-list-item"><b class="title">品牌：</b>
                                    <a href="#"><span>Google</span></a></li>
                                <li class="product-info-list-item"><b class="title">型号：</b>
                                    <span>Product 19</span></li>
                                <li class="product-info-list-item"><b class="title">商品库存：</b>
                                    <span>有现货</span></li>
                                <li class="product-info-list-item"><b class="title">销量：</b>
                                    <span>2,365</span></li>
                            </ul>
                            -->
                        </div>
                    </div>
                    <!--Price end-->



                    <!--Option Start-->
                    <div class="row widget product-options">
                        <div class="col-xs-12">
                            <span class="title">商品选项</span>
<!--
                            <div id="product-variant-wrapper">
                                <div class="variant-group">
                                    <h5>尺寸</h5>
                                    <div class="button btn-variant selected" data-variant="1:1">
                                        <span>大号</span>
                                    </div>
                                    <div class="button btn-variant disabled" data-variant="1:7">
                                        <span>中号</span>
                                    </div>
                                </div>
                                <div class="variant-group">
                                    <h5>颜色</h5>
                                    <div class="button btn-variant selected" data-variant="2:2">
                                        <img src="https://mall.opencart.cn/image/cache/catalog/mi/variant/color-1-100x100.png">
                                        <span>朱红色</span>
                                    </div>
                                    <div class="button btn-variant" data-variant="2:3">
                                        <img src="https://mall.opencart.cn/image/cache/catalog/mi/variant/color-2-100x100.png">
                                        <span>军绿色</span>
                                    </div>
                                </div>
                            </div>
-->
                            <div id="options">
                                <div id="product-quantity" class="input-group">
    <span class="input-group-btn quantity-down">
      <a class="btn btn-default"  v-on:click=" change_number('-')" >-</a>
    </span>
                                    <input class="form-control cart-quantity"
                                           v-model="goods_number"
                                           type="text" name="quantity" size="2"
                                           id="input-quantity" >
                                    <span class="input-group-btn quantity-up">
      <a class="btn btn-default"  v-on:click=" change_number('+')" >+</a>
    </span>
                                </div>
                                <input type="hidden" name="product_id" value="46">
                            </div>

                        </div>
                    </div>
                    <!--Option end-->

                    <!--Tabs start-->
                    <div class="row widget">
                        <div class="col-xs-12">
                            <!--Tab nav start-->
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#tab-description" data-toggle="tab">商品详情</a></li>
                                <!--<li><a href="#tab-review" data-toggle="tab">商品评价</a></li>-->
                                <!--<li><a href="#tab-question" data-toggle="tab">商品咨询</a></li>-->
                            </ul>
                            <!--Tab nav end-->

                            <!--Tab content start-->
                            <div class="tab-content">
                                <div v-html="goods_info.description" class="tab-pane active" id="tab-description">

                                </div>

                                <!--
                                <div id="tab-question" class="tab-pane">
                                    <div id="displayQuestionAnwser" class="mb-2">
                                        <div class="item">
                                            <dl class="ask">
                                                <dd>
                                                    <div class="content">
                                                        <div>
                                                            <i class="fa fa-question-circle"></i>
                                                            <div class="inner"><b>欧欧：支持任何型号吗</b></div>
                                                        </div>
                                                        <div class="date-answer">2018-04-27 15:04:34</div>
                                                    </div>
                                                </dd>
                                            </dl>
                                            <dl class="answer">
                                                <dd>
                                                    <div class="content">
                                                        <div>
                                                            <i class="fa fa-comments"></i>
                                                            <div class="inner">店主回复：begin</div>
                                                        </div>
                                                        <div class="date-answer">2018-07-08 11:37:21</div>
                                                    </div>
                                                </dd>
                                            </dl>
                                        </div>
                                    </div>
                                    <div class="form-horizontal" id="form-question">
                                        <h2>询问关于该商品的问题</h2>
                                        <div class="form-group required">
                                            <div class="col-sm-12">
                                                <label class="control-label" for="input-question-name">您的姓名</label>
                                                <input type="text" name="question_name" value="" placeholder="您的姓名*" id="input-question-name" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group required">
                                            <div class="col-sm-12">
                                                <label class="control-label" for="input-question-question">您的问题</label>
                                                <textarea name="question_question" rows="5" id="input-question-question" class="form-control"></textarea>
                                                <div class="help-block"><span class="text-danger">注意</span> 评论内容不支持HTML代码！</div>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-primary" id="button-question">提交</button>
                                    </div>
                                </div>

                                <div class="tab-pane" id="tab-review"><div id="review"><p>此商品暂无评论。</p>
                                    </div>
                                </div>
                                -->
                            </div>
                            <!--Tab content end-->
                        </div>
                    </div>
                    <!--Tabs end-->


                </div>
            </div>
        </div>

        <nav id="bottom-add-to-cart" class="top-border">
            <div class="menu-item menu-wishlist right-border">
                <button id="button-add-to-wishlist">
                    <span style="font-size:2rem"
                          class="glyphicon glyphicon-heart"
                          v-on:click="do_favorite()"
                          aria-hidden="true"></span>
                    <!--<i class="fa fa-heart "></i>-->
                </button>
            </div>
            <div class="menu-item menu-cart">
                <a href="#/cart">
                    <i class="iconfont"><span class="cart-total" style="display:none;"></span></i>
                </a>
            </div>
            <div class="menu-item menu-add-to-cart">
                <button v-on:click="add_to_cart()" data-loading-text="处理中" class="button-add-to-cart">加入购物车</button>
            </div>
            <div class="menu-item menu-buy-now">
                <button v-on:click="buy()" data-loading-text="处理中" class="button-buy-now">立即购买</button>
            </div>
        </nav>
    </div>
</template>

<script>

    export default {
        name: "goods",
        data:function(){

            return {

                goods_id:0,

                goods_info:{

                },

                goods_number:1

            }
        },

        methods:{


            get_goods_info:function(){

                var t = this;

                var url = this.config.web_url + '/?r=goods/info&goods_id=' + this.goods_id;

                this.axios.get( url ).then( function( res ){

                    t.goods_info = res.data;



                });

            },

            add_to_cart:function(){

                //todo 添加到购物车
                var t = this;
                var url = this.config.web_url + '?r=cart/add';
                url += '&product_id='+this.goods_id+'&number=' + this.goods_number;

                this.axios.get( url )
                    .then(function (res) {

                        if( res.data.description ){
                            //todo 显示 购物车添加提示
                            // t.tips.message = res.data.description;
                            // t.tips.show = 1;

                            var tips_data = {
                                show:1,
                                message:res.data.description
                            };

                            t.bus.$emit('tips',tips_data);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },


            buy:function(){


                var t = this;
                var url = this.config.web_url + '?r=goods/buy';
                url += '&product_id='+this.goods_id+'&number=' + this.goods_number;

                this.axios.get( url ).then(function ( res ) {

                    if( !res.data.status ){
                        t.$router.push('/checkout');
                        // t.$router.push('/checkout/goods/' + t.goods_id + '/number/' + t.goods_number );
                    }

                }).catch(function(){

                });
            },

            change_number:function( flag ){

                flag == '-' ? this.goods_number -- : this.goods_number ++ ;

                this.goods_number = this.goods_number < 1 ? 1: this.goods_number;

            },

            do_favorite:function(){



            }

        },

        created:function(){

            this.goods_id = this.$route.params.goods_id;

            this.get_goods_info();


        },


    }
</script>

<style scoped>

</style>